<template>
  <div :class="flaga ? 'Cook' : 'Cooks'">
    <!-- <div class="ding">
      <img src="../../../assets/fonts2/1.png" />
    </div> -->
    <div class="shang">
      <span class="iconfont icon-fanhui" @click="fanhui()"></span>
      <p class="jinpai">金牌厨师</p>
      <div class="tou">
        <span class="iconfont icon-dian"></span>
        <div class="zhongjian"></div>
        <span class="iconfont icon-shuangyuanquan"></span>
      </div>
    </div>
    <div class="zhong">
      <div class="huayuan">
        <span class="iconfont icon-ziyuan"></span>
        <p>嘉宾花园店</p>
        <span class="iconfont icon-qianjin"></span>
      </div>
      <div class="sousuos">
        <span class="iconfont icon-sousuo"></span>
      </div>
    </div>
    <ul class="rightshang">
      <li>
        请选择擅长
        <span class="iconfont icon-xia" id="icon-xia"></span>
      </li>
      <li>
        服务形式
        <span class="iconfont icon-xia" id="icon-xia"></span>
      </li>
    </ul>
    <div class="xia">
      <ul :class="flag ? 'left' : 'lefts'">
        <li
          v-for="(item, index) in this.dataList"
          :key="index"
          :class="active == index ? 'tui' : ''"
          @click="gaoliang(index)"
        >
          <p>{{ item.name }}</p>
        </li>
      </ul>
      <div class="right">
        <ul :class="flag ? 'rightxia' : 'rightxias'">
          <li
            v-for="(item, index) in this.active === 0
              ? this.$store.state.list
              : rightList"
            :key="index"
          >
            <div class="rightxialeft">
              <img :src="item.Chef_head" @click="xiang" />
              <p class="pingfen">{{ item.Chef_rating }}</p>
            </div>
            <div class="rightxiaright">
              <h1 class="name">{{ item.Name }}</h1>
              <button class="btn" ref="btn" @click="guan(item,index)">
                {{ item.Attention == "0" ? "已关注" : "关注" }}
              </button>
              <p class="pppp">{{ item.introduce }}</p>
              <span style="text-align: center; line-height: 17px">{{
                item.Chef_level === "0" ? "特色好吃" : "从业13年"
              }}</span>
              <div>
                <h1 class="reads">￥{{ item.Chef_price }}</h1>
                <h1 class="huise">{{ item.Appointments }} 人预约</h1>
              </div>
              <p class="huise">预约时间</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- <Xiang v-if="flags" @tuichus="tuichua"/> -->
  </div>
</template>

<script>
// import Xiang from "./xiang/xiang";
import { mapState } from "vuex";
export default {
  name: "",
  components: {
    // Xiang
  },
  data() {
    return {
      active: 0,
      dataList: [
        { name: "厨师推荐", Id: "0" },
        { name: "金牌厨师", Id: "1" },
        { name: "银牌厨师", Id: "2" },
        { name: "铜牌厨师", Id: "3" },
        { name: "玄铁厨师", Id: "4" },
        { name: "草根厨师", Id: "5" },
        { name: "其他帮厨", Id: "6" },
      ],
      level: "",
      flag: false,
      flaga: true,
      flags: false,
      rightList: [],
      num: 0,
    };
  },
  methods: {
    fanhui() {
      setTimeout(() => {
        history.back()
      }, 300);
      this.flaga = false;
    },
    filteRs(index) {
      this.rightList = this.$store.state.list.filter((item) => {
        return item.Chef_label == index || index == 0;
      });
    },
    gaoliang(index) {
      this.active = index;
      this.$store.commit("lists", index);
      // 点击对应选项渲染出对应厨师
      //  console.log(this.$store.state.list.rows);
      this.rightList = this.$store.state.list.filter((item) => {
        if (item.Chef_label == this.active) {
          return item.Chef_label == this.active;
        } else if (this.active === 0) {
          return this.$store.state.list.rows;
        }
      });
    },
    xiang() {
      this.flags = true;
    },
    tuichua() {
      this.flags = false;
    },

    guan(item,index) {
      // 改变关注状态
      let Attention = item.Attention === "0" ? "1" : "0";
      console.log(Attention, item.Attention);
      // 通过接口修改后台数据
      this.$store.commit("items", {
        Attention: Attention,
        id: item.Id,
        Ids: this.active.toString(),
      });
      console.log(this.rightList, "前");
      // 异步变成同步
      setTimeout(() => {
        if (this.active == Number(item.Chef_label)) {
          this.$store.commit("lists", 0);

          this.rightList = this.$store.state.list.filter((item) => {
            if (item.Chef_label == this.active) {
              return item.Chef_label == this.active;
            }
          });
        }
        console.log(this.rightList, "后");
      }, 500);

      this.$refs['btn'][index].style.animationDuration="1s"
      this.$refs['btn'][index].style.animationName="animateLeft"
      console.log(this.$refs['btn'][index],1);
    },
  },
  computed: {
    
  },
  created() {
    this.$store.commit("datas", 1);
    this.$store.commit("lists", 0);
  },
  mounted() {
    setTimeout(() => {
      this.flag = true;
    }, 20);
  },
};
</script>

<style scoped>
@import url("../../../assets/fonts2/iconfont.css");
.jinpai {
  margin-left: 20%;
}
.btn {
  float: right;
  margin-right: 10px;
  margin-top: -5px;
  background: none;
  border: none;
  cursor: pointer;
  animation-duration: 1s;
  animation-name: animateLeft;
}
@keyframes animateLeft {
  50% {
    opacity: 0;
  }
}
.Cook {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}
.Cooks {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(100vw, 0);
  transition: all 300ms;
}
.shang {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shang > span {
  margin-left: 10px;
}
.ding {
  width: 100%;
  height: 30px;
}
.tou {
  width: 100px;
  height: 30px;
  background: rgba(145, 145, 145);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-right: 10px;
}
.zhongjian {
  width: 1px;
  height: 60%;
  background: #fff;
}
.zhong {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.huayuan {
  width: 150px;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.sousuos {
  width: 50px;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.xia {
  width: 100%;
  height: calc(100% - 140px);
  display: flex;
  margin-top: 30px;
}
.left {
  width: 30%;
  height: 100%;
  transform: translate(0, 0);
  transition: all 500ms;
}
.lefts {
  width: 30%;
  height: 100%;
  transform: translate(0, 5vh);
  transition: all 500ms;
}
.left > .tui {
  /* background: rgb(117, 113, 113); */
  color: rgba(255, 196, 91);
}
.left > li {
  width: 100%;
  height: 60px;
  background: rgba(248, 248, 248);
  text-align: center;
  line-height: 60px;
}
.right {
  width: 70%;
  height: 100%;
}
.rightshang {
  width: 100%;
  height: 30px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.rightshang li {
  width: 50%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  /* margin-left: 20px; */
}
#icon-xia {
  width: 5px;
  height: 3px;
  display: inline-block;
}
.rightzhong {
  width: 100%;
  height: 100px;
  transform: translate(0, 0);
  transition: all 1000ms;
}
.rightzhongs {
  width: 100%;
  height: 100px;
  transform: translate(0, 25vh);
  transition: all 1000ms;
}
.rightzhong img {
  width: 95%;
  height: 100%;
}
.rightxia {
  width: 95%;
  height: 100%;
  overflow-y: auto;
  margin-top: 10px;
  transform: translate(0, 0);
  transition: all 1000ms;
}
.rightxias {
  width: 95%;
  height: calc(100% - 130px);
  overflow-y: auto;
  margin-top: 10px;
  transform: translate(0, 20vh);
  transition: all 1000ms;
}
.rightxia li {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  display: flex;
}
.rightxialeft {
  width: 40%;
  height: 100%;
  display: flex;
  position: relative;
  justify-content: space-around;
}
.rightxialeft img {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  float: left;
}
.pingfen {
  position: absolute;
  width: 100px;
  float: left;
  height: 20px;
  bottom: 10%;
  text-align: center;
}
.rightxiaright {
  width: 60%;
  height: 100%;
}
.rightxiaright h1 {
  /* font-size: 12px; */
  font-weight: 600;
  line-height: 20px;
}
.rightxiaright p {
  font-size: 12px;
  line-height: 20px;
  color: rgba(187, 187, 187);
}
.rightxiaright span {
  display: inline-block;
  width: 60px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  border: 1px solid blue;
  border-radius: 10px;
  color: blue;
}
.reads {
  color: red;
  font-size: 13px;
  float: left;
}
.huise {
  margin-left: 10px;
  float: left;
  color: #ccc;
  font-size: 13px;
}
.name {
  margin-top: 3px;
  font-size: 14px;
}
</style>